textarea::-webkit-input-placeholder {
    color: $--color-text-placeholder;
}
textarea:-moz-placeholder {
    color: $--color-text-placeholder;
}
textarea::-moz-placeholder {
    color: $--color-text-placeholder;
}
textarea:-ms-input-placeholder {
    color: $--color-text-placeholder;
}

textarea {
    display: block;
    resize: vertical;
    padding: $--textarea-padding-default;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: $--color-text-regular;
    background-color: $--color-white;
    background-image: none;
    border: $--border-base;
    border-radius: $--border-radius-base;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    min-height: 54px;
    cursor: pointer;

    @include hover() {
        border-color: $--color-text-placeholder;
    }

    &:focus {
        outline: none;
        border-color: $--color-primary !important;
    }
}

.foxui-textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    font-size: $--font-size-base;

    .foxui-textarea-count {
        font-style: normal;
        color: $--color-text-secondary;
        background: $--color-white;
        position: absolute;
        font-size: $--font-size-extra-small;
        bottom: $--textarea-padding-vertical;
        right: $--textarea-padding-vertical * 2;
    }
}
